<template>
  <div class="snsreplyinputs">
    <a
      href="javascript:;"
      class="icon snsreplyinputs_comment"
      :class="isComment ? 'on' : ''"
      @click="commentClickHandle"
    >
      <span class="icon-comment"></span>
    </a>
    <div class="snsreplyinputs_input" v-if="isComment">
      <input
        type="text"
        value=""
        :placeholder="$t('lang.输入回复内容')"
        @keyup.enter="addComment"
        v-model="currentUserComment"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "SnsReplyInputs",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return { currentUserComment: "", isComment: false };
  },
  methods: {
    commentClickHandle() {
      this.isComment = this.isComment ? false : true;
    },
    addComment() {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.snsreplyinputs {
  text-align: left;
  padding: 5 / @base 0;
  a {
    &.snsreplyinputs_comment {
      &.on {
        color: brown;
      }
      span {
        font-size: 24 / @base;
      }
    }
  }
  .snsreplyinputs_input {
    margin: 10 / @base 0 0;
    input {
      width: 100%;
      border: 1 / @base solid #ccc;
      padding: 5 / @base;
    }
  }
}
</style>
